<template>
   <div>
      <h1>原生方式访问模块中的vuex</h1>
      {{$store.state.a.shopcartList}}
      <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>名称</td>
                    <td>数量</td>
                    <td>价格</td>
                    <td>小计</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in $store.state.a.shopcartList" :key="item._id">
                    <td>
                        <input type="checkbox" v-model="item.checked" @change="checkedShopcart(item._id)">
                    </td>
                    <td>{{item.name}}</td>
                    <td>
                        <button @click="changeNum({_id:item._id,n:-1})">-</button>
                        {{item.num}}
                        <button @click="changeNum({_id:item._id,n:1})">+</button>
                    </td>
                    <td>{{item.price}}</td>
                    <td>{{item.num*item.price}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        总价：{{$store.getters['a/totalPrice']}}
                    </td>
                </tr>
            </tfoot>
       </table>
   </div>
</template>

<script>
export default {
    methods:{
        async getShopcartList(){
            this.$store.dispatch("a/getShopcartList_Async")
        }
    },
    created(){
        this.getShopcartList()
    }
}
</script>

<style>

</style>